<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-07 22:50:30
 * @LastEditTime: 2022-07-14 11:43:34
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\Login\components\MobileNumberLogin.vue
 * Copyright 版权声明
-->
<template>
  <el-form
    class="login-form"
    autocomplete="on"
    :model="loginForm"
    :rules="loginRules"
    ref="loginForm"
  >
    <el-form-item prop="tel">
      <el-input
        name="tel"
        type="text"
        @keyup.enter="handleLogin"
        v-model="loginForm.tel"
        autocomplete="on"
        clearable
        placeholder="手机号"
      >
        <template #prefix>
          <el-icon><iphone /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="verificationCode">
      <div class="my-verify-code">
        <el-input
        name="verificationCode"
        type="text"
        @keyup.enter="handleLogin"
        v-model="loginForm.verificationCode"
        autoComplete="on"
        placeholder="验证码"
        maxlength="6"
      >
        <template #prefix>
          <svg-icon icon-class="my-yanzhengma"/>
        </template>
      </el-input>
        <el-button v-show="verificationCodeGet" :loading="loadingSend" @click.prevent="getVerifyCode" class="verify-code verify-code-btn">获取验证码</el-button>
        <el-button v-show="!verificationCodeGet" :loading="loadingSend" class="verify-code verify-code-btn"><span>{{verificationCodeTimer}}</span>秒后重新获取</el-button>
      </div>
    </el-form-item>
    <el-form-item class="el-form-item_submit">
      <el-button type="primary" :loading="loading" @click.prevent="handleLogin" class="login-btn">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 图标组件
import { Iphone } from '@element-plus/icons-vue'
import { SMS_VERIFICATION_CODE_TIMER } from '@/config'
import { validateTelephone } from '@/utils/validate'
import { sendSmsVerificationCode } from '@/api/login'

export default {
  name: 'MobileNumberLogin',
  components: {
    Iphone
  },
  data() {
    // 校验手机号
    const validateUsername = (rule, value, callback) => {
      if (!validateTelephone(value)) {
        callback(new Error('请输入正确格式的手机号'))
      } else {
        callback()
      }
    }
    return {
      verificationCodeTimer: SMS_VERIFICATION_CODE_TIMER, // 定义初始时间为60s
      verificationCodeGet: true, // 通过v-show控制显示获取还是倒计时
      loginForm: {
        tel: '', // 手机号
        verificationCode: '' // 验证码
      },
      loginRules: {
        tel: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },
      loading: false,
      loadingSend: false
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    // 获取短信验证码
    getVerifyCode() {
      this.$refs.loginForm.validateField('tel', valid => {
        if (!valid) {
          this.loadingSend = true
          sendSmsVerificationCode({
            tel: this.loginForm.tel
          }).then((res) => {
            console.log(res)
            this.loadingSend = false
            this.verificationCodeGet = false //点击button改变v-show的状态
            const authTimer = setInterval(() => { //定时器设置每秒递减
              this.verificationCodeTimer-- //递减时间
              if (this.verificationCodeTimer <= 0) {
                this.verificationCodeGet = true //60s时间结束还原v-show状态并清除定时器
                this.verificationCodeTimer = SMS_VERIFICATION_CODE_TIMER
                clearInterval(authTimer)
              }
            }, 1000)
          }).catch((err) => {
            err
            this.loadingSend = false
          })
        } else {
          return false
        }
      })
    },
    // 登录操作
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('Login', {
              loginData: this.loginForm,
              loginType: 'MOBILE_NUMBER'
            })
            .then((res) => {
              this.loading = false
              this.$router.push({ path: '/' })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
</style>

